<template>
  <base-dialog
    title="人员选择"
    ref="baseDialog"
    @handleClose="handleClose"
    @handleSubmit="handleConfirm"
    width="42%"
  >
    <div class="content">
      <div class="form">
        <el-form :inline="true" :model="form" size="mini">
          <el-form-item>
            <el-input v-model="form.username" placeholder="用户账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.nickname" placeholder="用户姓名"></el-input>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" size="mini" @click="search">搜索</el-button>
            <el-button type="warning" size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          size="mini"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @current-change="currentChange"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column prop="username" label="账号" align="center"></el-table-column>
          <el-table-column prop="nickname" label="姓名" align="center"></el-table-column>
        </el-table>
        <base-pagination
          :size="form.size"
          :current="form.current"
          :total="total"
          small
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        ></base-pagination>
      </div>
    </div>
  </base-dialog>
</template>

<script>
import { userPage } from "@/api/system/user"
export default {
  data() {
    return {
      form: {
        current: 1,
        size: 10
      },
      total: 0,
      tableData: [],
      username: "",
      multipleSelection: undefined
    }
  },
  methods: {
    init(username) {
      this.username = username
      this.$refs.baseDialog.dialogVisible = true
      this.getPeople()
    },
    reset() {
      this.form = {
        current: 1,
        size: 10
      }
      this.getPeople()
    },
    search() {
      this.getPeople()
    },
    handleClose() {
      this.form = {
        current: 1,
        size: 10
      }
      this.$refs.baseDialog.dialogVisible = false
      this.$refs.multipleTable.clearSelection()
    },
    handleSizeChange(val) {
      this.form.size = val
      this.getPeople()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.getPeople()
    },
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      } else {
        this.multipleSelection = val.pop()
      }
    },
    currentChange(currentRow) {
      this.$refs.multipleTable.toggleRowSelection(currentRow)
    },
    handleConfirm() {
      if (!this.multipleSelection) {
        this.$message({
          message: "请选择一位人员",
          type: "warning"
        })
        return
      }
      this.$emit("selectPeople", this.multipleSelection)
      this.handleClose()
    },
    /**
     *
     */
    getPeople() {
      userPage(this.form).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
        //回显
        const val = this.tableData.find((e) => e.username === this.username)
        if (!val) return
        this.$refs.multipleTable.toggleRowSelection(val, true)
        this.multipleSelection = val
      })
    }
  }
}
</script>
